<template>
  <div class="apps_list_headers"
       style="height: 48px;display: flex;justify-content: space-between;align-items: center;background-color: #fff;padding: 0 20px;border-radius: 4px;">
    <div style="display:flex;align-items: center;">
      <div class="dataset_icon"
           :style="{backgroundImage:'url('+backgroundImage(pageheaderName)+')','background-size':'20px 20px'}"></div>
      <div style="margin-left:10px;font-size: 20px;font-weight: 600;color: rgba(0, 0, 0, 0.75);">{{pageheaderName}}</div>
      <div>
        <view-linked-info :linkKey="pageheaderName"></view-linked-info>
      </div>
    </div>
    <div v-if="pageheaderName==='Marketplace Management'"
         class="list_headers_rightlink">
      <el-tabs v-model="activeName"
               @tab-click="handleClick">
        <el-tab-pane label="Review"
                     name="review"></el-tab-pane>
        <el-tab-pane label="Management"
                     name="management"></el-tab-pane>
      </el-tabs>
    </div>
    <div v-else-if="pageheaderName==='My Applications'"
         class="list_headers_rightlink rightlink cursor_pointer"
         @click="toApp">
      <div class="rightlink_icon"></div>
      <span>{{ $t('custom.component.cardApp.marketplace') }}</span>
    </div>
  </div>

</template>
<script>
export default {
  props: {
    pageheaderName: {
      type: String
    }
  },
  data () {
    return {
      activeName: 'review'
    }
  },
  methods: {
    toApp () {
      this.$router.replace({
        path: '/marketplace',
        query: {
          active: 'app'
        }
      })
    },
    handleClick (val) {
      this.$emit('tabsHandler', val.name)
    },
    backgroundImage (pageheaderName) {
      let url = ''
      switch (pageheaderName) {
        case 'My Applications':
          url = this.$ossLink + '/app/mspbots_theme_icon/application.png'
          break
        default:
          url = this.$ossLink + '/app/view_pageheader/dataset.png'
          break
      }
      return url
    }

  }
}
</script>
<style scoped lang="scss">
::v-deep .el-tabs__header {
  margin: 0;
  height: 48px;
}
::v-deep .el-tabs__nav {
  height: 48px;
}
::v-deep .el-tabs__nav-wrap::after {
  background-color: transparent;
}
.cursor_pointer {
  cursor: pointer;
}
.dataset_icon {
  width: 20px;
  height: 20px;
}
.apps_list_headers {
  .list_headers_rightlink {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .rightlink {
    // width: 209px;
    height: 30px;
    padding: 0 12px;
    border-radius: 4px;
    background-image: url("#{$--ossLink}/app/view_pageheader/dataset_bg.png");
    background-size: 209px 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .rightlink_icon {
      background-image: url("#{$--ossLink}/app/view_pageheader/marketplace.png");
      width: 30px;
      height: 30px;
      background-size: 30px;
      margin-right: 10px;
    }
    span {
      font-weight: 600;
      color: #ffffff;
      line-height: 20px;
      margin-right: 5px;
    }
    &:hover {
      transform: translateY(-3px);
      box-shadow: 0px 2px 6px 0px #b8caea;
    }
  }
}
</style>
